<template>
	<view class="content">
		<view class="block swiper-block">
			<SwiperMap style="width: 100%;height: 100%;" :list="swiperList"></SwiperMap>
		</view>
		<view @click="navigate('/page_other/help/help')" class="btn-block">
			<image :src="imageUrl+'/dingxi-jobs/home/帮帮我.png'" style="width:100%;height:100%;"></image>
		</view>
		<view class="count-block">
			<view class="count-item">
				<view class="count-name">访问量</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.browseCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name">岗位数</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.jobCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name">注册人数</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.customerCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name">企业数</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.enterpriseCount}}</view>
			</view>
		</view>
		<view class="white-content">
			<block v-if="identity==1">
				<view class="block feature-block">
					<view class="right-feature">
						<view @click="navigate('/page_other/policy/title')" class="feature-item">
							<view class="headline">政策法规</view>
							<view class="headline" style="margin-top: 10rpx;"></view>
						</view>
						<view @click="showDevelopingTips()" class="feature-item">
							<view class="headline">零工市场</view>
							<view class="headline" style="margin-top: 10rpx;"></view>
						</view>

						<view @click="navigate('/page_other/train/index')" class="feature-item">
							<view class="headline">技能培训</view>
						</view>
						<view @click="navigate('/page_other/job_hunting/job_hunting')" class="feature-item">
							<view class="headline">招聘求职</view>
							<view class="subtitle"></view>
						</view>
						<view @click="navigate('/page_other/serve/index')" class="feature-item">
							<view class="headline">就业创业</view>
							<view class="subtitle"></view>
						</view>
						<view @click="navigate('/page_other/job_hunting/intermediary/intermediary')"
							class="feature-item">
							<view class="headline">职介组织</view>
							<view class="headline" style="margin-top: 10rpx;"></view>
						</view>
					</view>
					<view class="left-feature">
						<view class="feature" @click="navigate('/page_other/obtain_employment/colleges_universities')">
							<view class="headline">高校毕业生服务</view>
						</view>
						<view class="feature" @click="navigate('/page_other/article/index?type=2520')">
							<view class="headline">机关事业单位招聘</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="identity==2 || identity==3">
				<view class="block menu-block">
					<view class="menu-item">
						<image :src="imageUrl+'/dingxi-jobs/home/1.png'" class="menu-img"
							@click="navigate('/page_other/job_hunting/job_hunting')"></image>
						<image :src="imageUrl+'/dingxi-jobs/home/2.png'" class="menu-img"
							@click="navigate('/page_other/policy/title')"></image>
					</view>
					<view class="menu-item">
						<image :src="imageUrl+'/dingxi-jobs/home/3.png'" class="menu-img" @click="showDevelopingTips()">
						</image>
						<image :src="imageUrl+'/dingxi-jobs/home/4.png'" class="menu-img"
							@click="navigate('/page_other/union/union')"></image>
					</view>
				</view>
			</block>
		</view>
		<view style="padding:0 30rpx;margin-bottom: 30rpx;margin-top: -30rpx;" v-if="identity==1"
			@click="navigate('/page_other/company/famous_enterprises')">
			<image :src="imageUrl+'/dingxi-jobs/home/dingxi-job-img.png'" style="width: 100%;height: 180rpx;"></image>
		</view>
		<view class="block article-block">
			<view class="article-tab">
				<view @click="noticeActive=2103" :class="noticeActive===2103?'active':''" class="tab-item">通知公告</view>
				<view @click="noticeActive=2104" :class="noticeActive===2104?'active':''" class="tab-item">工作动态</view>
				<view @click="noticeActive=2135" :class="noticeActive===2135?'active':''" class="tab-item">招聘信息</view>
				<view style="color: #a6a6a6;font-size: 28rpx;font-weight: normal;text-align: right;flex-grow: 1;"
					@click="navigate('/page_other/article/index?type='+noticeActive)">更多</view>
			</view>
			<view class="article-list" v-if="noticeActive!=1">
				<template v-if="newsList.length>0">
					<view @click="navigate('/page_other/article/detail?id='+item.id)" class="article-item"
						v-for="(item,index) in newsList" :key="item.id">
						<image mode="aspectFill" :src="item.ima_url" class="cover-photo"></image>
						<view class="info">
							<view class="title overflow-line">{{item.title}}</view>
							<view class="abstract">{{item.abstract}}</view>
							<view class="time">{{item.crt_time}}</view>
						</view>
					</view>
				</template>
				<view style="text-align: center;margin-top: 30rpx;" v-else>暂无数据</view>
			</view>
		</view>
		<view class="uniappDemo" v-if="adList.length>0">
			<!-- 弹框内容 -->
			<view class="uniappBox">
				<view :hidden="!uniappShowModel" class="uniappContant">
					<view>
						<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
						<swiper style="height: 480rpx;" @change="handlechange" :current="mycurrent"
							:indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
							<swiper-item v-for="i,index in adList[0].sonModelList" :key="i">
								<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
									<img :src="i.imgUrl" style="width: 100%;padding: 40rpx;" alt="" srcset="">
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view style="width: 100%;text-align: center;">
						{{adList[0].title}}
					</view>
					<view class="btn"
						style="width: 280rpx;text-align: center;height: 80rpx;display: flex;justify-content: center;align-items: center;background: #ff3057;color: #fff;font-size: 28rpx;border-radius: 40rpx;margin: 0 auto;margin-top: 80rpx;"
						@click="confirm">
						我知道了
					</view>
				</view>
				<!-- 背景黑色蒙版 -->
				<view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getNewsList as getNewsListApi
	} from '@/api/notice.js'
	import {
		getSwiperList as getSwiperListApi,
		getIndexCountApi,
		addBrowseApi
	} from '@/api/static.js'
	import {
		getPublishApi,
		getHotEnterprise
	} from '@/api/job_hunting.js'
	import {
		clickStatisticsApi,
	} from '@/api/home.js'
	export default {
		data() {
			return {
				uniappShowModel: true,
				noticeActive: 2103,
				publishActive: 1,
				oderDate: 1,
				orderDistance: 0,
				latitude: 0,
				longitude: 0,
				newsList: [],
				imageUrl: '',
				swiperList: [],
				hotJob: [],
				hotEnterprise: [],
				countList: [],
				adList: [],
				mycurrent: 0
			}
		},
		watch: {
			noticeActive: {
				handler(val) {
					if (val != 1) {
						this.getNewsList()
					} else {
						this.oderDate = 0;
						this.orderDistance = 1;
						this.getHotList()
					}
				},
				immediate: true
			},
			publishActive: {
				handler(val) {
					if (val == 1) {
						this.oderDate = 1;
						this.orderDistance = 0;
					} else {
						this.oderDate = 0;
						this.orderDistance = 1;
					}
					this.getHotList()

				},
				immediate: true
			},
		},
		methods: {
			clickStatistics() {
				type: 2
				clickStatisticsApi().then((res) => {
					console.log(res)
				})
			},
			handlechange(e) {
				this.mycurrent = e.detail.current
			},
			uniappModel() {
				this.uniappShowModel = true
			},
			// 点击确定按钮模态框消失
			confirm() {
				this.uniappShowModel = false
			},
			//onShareAppMessage 分享给朋友
			// #ifdef MP
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					title: '就业平台',
					path: '/pages/home/index'
				}
			},
			showDevelopingTips() {
				wx.navigateToMiniProgram({
					appId: 'wxdb2c62fa132a123e',
					path: 'pages/index/index'
				})
			},
			showKsbmTips() {
				wx.navigateToMiniProgram({
					appId: 'wx63326d0b5a594b38',
					path: 'pages/index/index',
				})
			},
			// #endif
			onErrorImg(item) {
				this.$set(item, 'logoUrl', this.imageUrl + '/job_hunting/job_detail/enterprise.jpg');
			},

			getHotList() {
				if (this.identity == 1) {
					uni.getLocation({
						isHighAccuracy: true,
						success: (current) => {
							this.latitude = current.latitude;
							this.longitude = current.longitude;
							uni.setStorageSync('latitude', this.latitude)
							uni.setStorageSync('longitude', this.longitude)
							getPublishApi({
								page: 1,
								limit: 3,
								oderDate: this.oderDate,
								orderDistance: this.orderDistance,
								longitude: this.longitude,
								latitude: this.latitude,
								distances: this.publishActive
							}).then((res) => {
								this.hotJob = res.list;
							})
						},
						fail: (e) => {
							this.showToast('获取位置失败，请重试！');
						}
					})
				}
			},
			getIndexCount() {
				getIndexCountApi().then((res) => {

					this.countList = res ?? [];
				})
			},
			addBrowse() {
				addBrowseApi()
			},
			navigate(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				} else {
					uni.showToast({
						title: '该功能暂未开放QWQ~',
						icon: 'none'
					})
				}
			},
			switchTo(url) {
				uni.switchTab({
					url
				});
			},
			getNewsList() {
				getNewsListApi({
					page: 1,
					limit: 3,
					type: this.noticeActive
				}).then((res) => {
					this.newsList = res.list ?? [];
				})
			},
			getSwiperList() {
				getSwiperListApi({
					userType: this.$store.getters.identity,
					seat: 1
				}).then((res) => {
					this.swiperList = res ?? []
				})
			},
			getAdList() {
				getSwiperListApi({
					userType: 3,
					seat: 4
				}).then((res) => {
					this.adList = res ?? []
				})
			}
		},
		computed: {
			identity() {
				return this.$store.getters.identity
			}
		},
		onLoad() {
			this.addBrowse();
			this.getIndexCount();
			if (!this.$store.getters.identity) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return;
			}
			this.imageUrl = this.globalConfig.imageUrl
			this.getSwiperList();
			this.getAdList();
			this.getHotList();
			this.clickStatistics();
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		position: relative;
		padding-bottom: 30rpx;

		.white-content {
			background: linear-gradient(#fff, #f7f6f9);
			border-radius: 20px 20px 0 0;
			width: 100%;
			margin-top: 0;
			position: relative;
			z-index: 99;
			margin-top: -60rpx;
			padding-top: 60rpx;
		}

		.block.feature-block {
			height: 480rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			color: #fff;
			// margin-bottom: 0;

			.headline {
				font-weight: bold;
				font-size: 37rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				text-shadow: 2px 2px #3B302D;
			}

			.subtitle {
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.left-feature {
				width: calc((100%/3) - 6rpx);
				margin-left: 12rpx;
				height: calc((100% - 30rpx) / 2);
				margin-top: -220rpx;

				.feature:nth-child(1) {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					border-radius: 12rpx;
					margin-bottom: 15rpx;
					padding: 20rpx;
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/1招聘求职.png') no-repeat center;
					background-size: 100% 100%;
				}

				.feature:nth-child(2) {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					border-radius: 12rpx;
					padding: 20rpx;
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/8机关事业单位招聘.png') no-repeat center;
					background-size: 100% 100%;
				}
			}

			.right-feature {
				width: calc((100%/3*2) - 6rpx);
				height: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.feature-item {
					width: calc(50% - 6rpx);
					height: calc(32% - 6rpx);
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 12rpx;
					padding: 20rpx;
				}

				.feature-item:nth-child(odd) {
					margin-right: 10rpx;
				}

				.feature-item:nth-child(1) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/2中介机构.png') no-repeat center;
					background-size: 100% 100%;

				}

				.feature-item:nth-child(2) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/零工市场.png') no-repeat center;
					background-size: 100% 100%;

				}

				.feature-item:nth-child(3) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/技能培训.png') no-repeat center;
					background-size: 100% 100%;
				}

				.feature-item:nth-child(4) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/招聘求职.png') no-repeat center;
					background-size: 100% 100%;
				}

				.feature-item:nth-child(5) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/6就业创业.png') no-repeat center;
					background-size: 100% 100%;
				}

				.feature-item:nth-child(6) {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dingxi-jobs/home/7大学生就业.png') no-repeat center;
					background-size: 100% 100%;
				}
			}
		}

		.count-block {
			width: calc(100% - 60rpx);
			margin: 20rpx auto;
			background: rgba(255, 255, 255, 0.7);
			backdrop-filter: blur(10px);
			border-radius: 5px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			font-size: 26rpx;
			position: absolute;
			transform: translate(-50%, 0%);
			left: 50%;
			top: 470rpx;
			z-index: 99999;
			box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);

			.count-item {
				width: calc((100% - 8px)/4);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.count {
					color: $uni-color-primary;
					margin-top: 15rpx;
				}
			}

			.line {
				height: 48rpx;
				width: 2px;
				border-radius: 100%;
				background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(0, 122, 255, 0.5), rgba(255, 255, 255, 0.7));
			}
		}

		.block {
			width: 100%;
			margin-bottom: 30rpx;
			padding: 30rpx;
		}

		.block.swiper-block {
			height: 620rpx;
			padding: 0;
			margin-bottom: 0;
		}

		.btn-block {
			position: fixed;
			right: 20rpx;
			bottom: 30rpx;
			z-index: 999;
			width: 130rpx;
			height: 130rpx;
			color: #333;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 50%;
			box-shadow: 0 0 18rpx 0 #dddddd;

			.btn-icon {
				width: 50rpx;
				height: 50rpx;
				text-align: center;
				font-size: 56rpx;
				margin-bottom: 10rpx;
			}

			.name {
				text-align: center;
				width: 100%;
			}
		}

		.block.menu-block {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0;
			position: relative;

			.menu-item:last-child {
				margin-bottom: 0;
			}

			.menu-item {
				display: flex;
				flex-direction: row;
				width: 100%;
				margin-bottom: 20rpx;

				.menu-img {
					//width: calc((100% - 30rpx) / 2);
					margin-right: 20rpx;
					height: 200rpx;
				}

				.menu-img:last-child {
					margin-right: 0;
				}
			}

			.menu-item2 {
				position: absolute;
				top: 25%;
				height: 240rpx;
				left: 34%;
				width: 240rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.item2-img {
					width: 240rpx;
					height: 240rpx;
				}
			}
		}

		.block.article-block {
			width: calc(100% - 60rpx);
			margin: 0 auto;
			border-radius: 10rpx;
			padding: 0;

			.article-tab {
				width: 100%;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 34rpx;
				color: #313131;

				.tab-item {
					margin-right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.tab-item.active {
					color: $uni-color-primary;
					height: 100%;
				}

				.tab-item:last-child {
					margin: 0;
				}
			}

			.article-list {
				width: 100%;
				display: flex;
				flex-direction: column;

				.article-item:last-child {
					margin-bottom: 0;
				}

				.article-item {
					width: 100%;
					padding: 30rpx 30rpx;
					border-radius: 8px;
					background: #fff;
					display: flex;
					flex-direction: row;
					margin-bottom: 30rpx;

					.cover-photo {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
						background: #efefef;
					}

					.info {
						width: calc(100% - 160rpx);
						height: 100%;

						.title {
							font-weight: bold;
						}

						.abstract {
							font-size: 24rpx;
							color: #999;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin-top: 6rpx;
							line-height: 1.5;
						}

						.time {
							font-size: 28rpx;
							color: #999;
						}
					}
				}

				.article-item:last-child {
					border: none;
				}
			}
		}
	}
</style>
<style scoped>
	.uniappBgdCol {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1000;
		-moz-opacity: 0.6;
		opacity: .6;
		filter: alpha(opacity=88);
	}

	.uniappContant {
		position: fixed;
		top: 30%;
		left: 55%;
		width: 70%;
		height: 50%;
		margin-left: -40%;
		background-color: white;
		z-index: 1001;
		border-radius: 20rpx;
	}
</style>
<style lang="scss">
	.swiper-item {
		border-radius: 30rpx;
		overflow: hidden;
		height: 85%;
		transform: scale(0.8);
		transition: all 0.5s ease;
		text-align: center;
		transition: all 0.5s ease-in-out;

		&.active {
			transform: scale(1);
		}
	}
</style>